<template>
	<div>
		    <transition
		      appear
		      appear-active-class="animate__animated animate__bounceInLeft"
		      enter-active-class="animate__animated animate__bounceInLeft"
		      leave-active-class="animate__animated animate__bounceOutLeft"
		    >
		<div class="editor-drawer rtl" v-show="isShow">
			<div class="editor-drawer-header">
			  <div class="logo">
				  <span>APIForUE</span>
			  </div>
			  <div class="search">
				  <input type="text" class="searchinput"/>
				  <div class="searchdiv">
					   <button type="button" class="searchbtn">Search</button>
				  </div>
			  </div>
			</div>
			<div class="editor-drawer-body">
				<el-collapse accordion style="border: none;">
					<el-collapse-item :title="f.label" :name="f.id" v-for="f in navList"  > 
					  <div class="api-item" v-for="c in f.childs" >
						<el-link :underline="false" :class="[{ active:rowKey == c.id }]" @click="onclick(c)">
						  <div class="dot"></div> {{c.label}}
						</el-link>
					  </div>
					</el-collapse-item>
				</el-collapse>
			</div>
		</div>
		
		</transition>
	</div>
	

</template>

<script setup lang="ts">
	import { ref} from "vue";
	
	import {
	  getNavs,
	  getNav
	} from '@/api/itester';
	
	
	const emits = defineEmits(['handleClick'])
	const handleClick=(e)=>{
		emits('handleClick', e)
	}
	
	const rowKey=ref('');
	const isShow=ref(false)
	const navList=ref();
	
	const show=(e)=>{
		isShow.value=e;
	}
	
	const onclick=(e)=>{
		let r=e;
		rowKey.value=e.id;
		getNav(e.id).then((r)=>{
		  if (r.code!=200) { throw Error(r.message) }
		  return r.result
		}).then((data)=>{
			r=data;
		}).catch((e)=>{
			console.error(e);
		}).finally(()=>{
			handleClick(r);	  
		})
	}
	
	onMounted(()=>{
		getNavs('').then((r)=>{
		  if (r.code!=200) { throw Error(r.message) }
		  return r.result
		}).then((data)=>{
		  navList.value=data;
		}).catch((e)=>{
		  console.error(e);
		}).finally(()=>{
		})
	})
	//暴露state和play方法
	defineExpose({
	  show
	});
	
</script>

<style  scoped>
	.editor-drawer{
		position: absolute;
		box-sizing: border-box;
		background-color: var(--edit-color-color);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: all var(--editor-transition-duration);
		height: 100%;
		top: 0;
		bottom: 0;
		width: 15rem;
		border-left: 1px solid #0f1619;
		-moz-user-select:none; /* Firefox私有属性 */
		-webkit-user-select:none; /* WebKit内核私有属性 */
		-ms-user-select:none; /* IE私有属性(IE10及以后) */
		-khtml-user-select:none; /* Khtml内核私有属性 */
		-o-user-select:none; /* Opera私有属性 */
		user-select:none; /* CSS3属性 */
		>.editor-drawer-header{
			color: #ffffff;
			display: flex;
			flex-direction: inherit;
			height: 8.125rem;
			padding-left: 0.625rem;
			>.logo{
				top: 0;
				width: 100%;
				height: 4.375rem;
				padding-top: 20px;
				padding-left: 0.3125rem;
				>span{
					font-size: x-large;
					color: white;
				}
				>small{
					font-size: large;
					color: white;
				}
			}
			>.search{
				width: 100%;
				left: 0;
				width: 100%;
				padding: 0rem;
				>.searchinput {
					width: 210px;
					height: 30px;
					line-height: 14px;
					border: 1px solid #263238;
					background: rgba(255,255,255,0.1);
					outline: none;
					padding: 8px 30px 8px 15px;
					border-radius: 20px;
					box-sizing: border-box;
					color: #fff;
					float: left;
				}
				>.searchdiv{
					float: left;
					display: block;
					margin-top: -2px;
					>.searchbtn {
						margin-left: -30px;
						width: 30px;
						height: 30px;
						outline: none;
						font-size: 0;
						cursor: pointer;
						opacity: .4;
						background: url(data:image/svg+xml,%3Csvg%20class%3D%22icon%22%20width%3D%2232px%22%20height%3D%2232.00px%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M909.6%20854.5L649.9%20594.8C690.2%20542.7%20712%20479%20712%20412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5%2031.3-212.1%2087.9C143.2%20256.5%20112%20331.8%20112%20412c0%2080.1%2031.3%20155.5%2087.9%20212.1C256.5%20680.8%20331.8%20712%20412%20712c67%200%20130.6-21.8%20182.7-62l259.7%20259.6c3.2%203.2%208.4%203.2%2011.6%200l43.6-43.5c3.2-3.2%203.2-8.4%200-11.6zM570.4%20570.4C528%20612.7%20471.8%20636%20412%20636s-116-23.3-158.4-65.6C211.3%20528%20188%20471.8%20188%20412s23.3-116.1%2065.6-158.4C296%20211.3%20352.2%20188%20412%20188s116.1%2023.2%20158.4%2065.6S636%20352.2%20636%20412s-23.3%20116.1-65.6%20158.4z%22%20fill%3D%22%23ffffff%22%20/%3E%3C/svg%3E) no-repeat center center/20px;
					}
				}
			
			}
			
		}
		>.editor-drawer-body{
			flex: 1;
			overflow-y: auto;
			/deep/ .el-collapse-item__header {
			    display: flex;
			    align-items: center;
			    background: none;
			    cursor: pointer;
			    border-bottom: 1px solid rgba(255,255,255,0.06);
			    font-size: 13px !important;
				color: rgba(255,255,255,0.5);
			    outline: 0;
			}
			
			/deep/ .el-collapse-item__header{
				font-size: unset;
				padding-left: 10px !important;
			}
			
			/deep/ .el-collapse-item__wrap {
			    background: none;
			    overflow: hidden;
			    box-sizing: border-box;
			    border-bottom: 1px solid rgba(255,255,255,0.06);
			}
			
			/deep/ .el-collapse-item__content {
			    padding-bottom: 0px; 
				padding: 0.5rem;
			    line-height: 1.7692307692;
			}
			/deep/ .el-link {
			    display: inline-flex;
			    flex-direction: row;
			    align-items: center;
			    justify-content: center;
			    vertical-align: middle;
			    position: relative;
			    text-decoration: none;
			    outline: 0;
			    cursor: pointer;
			    padding: 0;
			    font-size: 0.75rem;
			    font-weight: normal;
			}
			>.api-item{
				padding-left: 0.625rem;
				font-size: 0.75rem;
			}
			
			/deep/ .el-link:hover{
				.dot{
					background: var(--edit-blue);
				}
			}
			
			/deep/ .el-link.active{
				color:var(--edit-blue);
				.dot{
					background: var(--edit-blue);
				}
			}
			
			.dot {
			  width: 0.375rem;
			  height: 0.375rem;
			  border-radius: 100%;
			  background: rgba(255,255,255,0.3);
			  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 1);
			  margin-right: 0.5rem;
			}
			
			
		}
	}
	
	.editor-drawer.rtl{
		left:  0;
		z-index: 1;
	}
</style>